<template>
  <header class="header">
    <div class="logo">
      <h1>咪咕音乐</h1>
    </div>
    <nav class="nav">
      <router-link to="/" class="nav-item">首页</router-link>
      <router-link to="/music" class="nav-item">音乐馆</router-link>
      <router-link to="/mv" class="nav-item">MV</router-link>
      <router-link to="/radio" class="nav-item">电台</router-link>
      <router-link to="/artist" class="nav-item">歌手</router-link>
    </nav>
    <div class="search">
      <input 
        type="text" 
        v-model="keyword"
        @keyup.enter="handleSearch"
        placeholder="搜索音乐、歌手、专辑"
      >
    </div>
    <div class="user">
      <button class="login-btn">登录</button>
      <button class="vip-btn">开通VIP</button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const keyword = ref('')

const handleSearch = () => {
  if (!keyword.value.trim()) return
  router.push({
    path: '/search',
    query: { keyword: keyword.value }
  })
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.logo h1 {
  font-size: 24px;
  color: #1890ff;
  margin: 0;
}

.nav {
  display: flex;
  margin-left: 40px;
  gap: 20px;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.nav-item:hover,
.nav-item.router-link-active {
  color: #1890ff;
}

.search {
  margin-left: auto;
  margin-right: 20px;
}

.search input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.search input:focus {
  border-color: #1890ff;
}

.user {
  display: flex;
  gap: 10px;
}

.login-btn,
.vip-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-btn {
  background: transparent;
  color: #666;
}

.vip-btn {
  background: #1890ff;
  color: white;
}
</style> 